<template>
  <!-- 列表组件 -->
  <div class="equip-box">
    <div
      v-for="(item,index) in dataList"
      :key="index"
      class="equip-box-one"
      :class="!item.existEquipment ? (nowIndex===index?'equip-box-one-active':'') : 'equip-box-one-disabled'"
      @click="!item.existEquipment&&selectionChange(item,index)"
    >{{ item.productLineName }}</div>
  </div>
</template>
<script>
import productionLineApi from "@/api/processing-management/basic-info-manage/production-line-manage/index";

export default {
  data() {
    return {
      dataList: [],
      nowIndex: "",
      productLineName: "",
      productLineNo: ""
    };
  },
  watch: {},
  created() {
    this.queryList();
  },
  mounted() {},
  methods: {
    query(productLineName, productLineNo) {
      this.productLineName = productLineName;
      this.productLineNo = productLineNo;
      this.queryList();
    },
    selectionChange(e, index) {
      this.nowIndex = index;
      this.$emit("selectionChange", e);
    },
    // 获取设备数据
    queryList() {
      let params = {
      };
      productionLineApi.queryByConditionAndMonitor(params).then(res => {
        if (res.code === 1) {
          let data = res.data || [];
          let list = [{
            productLineName: '全部',
            existEquipment: false
          }];
          this.dataList = list.concat(data || []);
          if (this.dataList.length > 0) {
            if (this.dataList[0].existEquipment === false) {
              this.selectionChange(this.dataList[0], 0);
            }
          }
        }
      });
    }
  }
};
</script>
<style lang="scss"  scoped>

.equip-box {
  width: 100%;
  height: 100%;
  padding: 16px 9px;
}
.equip-box-one {
  width: 100%;
  padding: 0 10px;
  margin-bottom: 5px;
  color: #fff;
  font-size: 15px;
  height: 41px;
  line-height: 41px;
  border-radius: 21px;
  border: 1px solid #1093B6;
  text-align: center;
  cursor: pointer;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  &:not(.equip-box-one-disabled):hover {
    background: linear-gradient(0deg, #69EBCF, #19ABBD);
  }
}
.equip-box-one-active {
  // color: #000000;
  // font-weight: 700;
  // background-color: #fff;
  background: linear-gradient(0deg, #69EBCF, #19ABBD);
}
.equip-box-one-disabled {
  background: #00000060;
  border: 1px solid #00000000;
  cursor: not-allowed;
  filter: brightness(0.5);
}
</style>
